<template>
  <div>
  <div v-if="isshowwindow" class="tanwindow" @click="hidewindow">
    <!-- 活动 -->
    <div v-if="showtype==1" style="background-color: white;border-radius: 10px;width: 90vw;padding: 30px;box-sizing: border-box;">
      <div style="text-align: center;font-size: 24px;">温馨提示</div>
      <div style="font-size: 16px;margin-top: 20px;margin-bottom: 20px;">首冲100元送50元，赠款分5个月返还，每月减免10元月租，实现优惠套餐</div>
      <div style="display: flex;justify-content: center;">
        <div @click="windowzf" style="font-size: 22px;color: white;background-color: #FF9410;padding: 8px 20px;border-radius: 40px;">确认并支付</div>
      </div>
    </div>
    <!-- 普通 -->
    <div v-if="showtype==2" style="background-color: white;border-radius: 10px;width: 90vw;padding: 30px;box-sizing: border-box;">
      <div style="text-align: center;font-size: 24px;">活动提醒</div>
      <div style="font-size: 16px;margin-top: 20px;margin-bottom: 20px;text-align: center;">
        <div style="color: #F83838;font-weight: bold;">限时首冲100送50享优惠套餐</div>
        <div>确定放弃参加吗？</div>
      </div>
      <div style="display: flex;justify-content: center;">
        <div @click="windowzf" style="font-size: 22px;color: white;background-color: #AFAFAF;padding: 8px 20px;border-radius: 40px;margin-right: 30px;">确定放弃</div>
        <div  style="font-size: 22px;color: white;background-color: #FF9410;padding: 8px 20px;border-radius: 40px;width: 128px;text-align: center;">去参加</div>
      </div>
    </div>
  </div>
  <div class="all" style="padding:20px 10px">
    <!-- 弹窗 -->
    
    <div class="top">
        <div v-if="!isgg">
          <div class="t_title" >设置套餐生效时间：</div>
          <div class="t_sxtimebox" v-if="list.isCurrentActivi == 1">
            <div class="t_sxitem" :style="{'background': taocans.type==1 ? '#FFB300':'#E6E6E6','color': taocans.type==1 ? 'white':'#787878'}" @click="radiochange('1')" >立即生效</div>
            <div class="t_sxitem" :style="{'background': taocans.type==2 ? '#FFB300':'#E6E6E6','color': taocans.type==2 ? 'white':'#787878'}" @click="radiochange('2')">27日生效（当月）</div>
          </div>
          <div class="t_sxtimebox" v-if="list.isCurrentActivi == 0">
            <div class="t_sxitem" style="width: 100%;" :style="{'background': taocans.type==2 ? '#FFB300':'#E6E6E6','color': taocans.type==2 ? 'white':'#787878'}" @click="radiochange('2')" >立即生效</div>
          </div>
        </div>
        
        <!-- <div>
          <van-radio-group  @change='radiochange' v-model="taocans.type" direction="horizontal" v-if="list.isCurrentActivi == 1">
            <van-radio  name="1">立即生效</van-radio
            >
            <van-radio name="2">27日生效（当月）</van-radio>
          </van-radio-group>
          <van-radio-group  v-model="taocans.type" direction="horizontal"  v-if="list.isCurrentActivi == 0">
            <van-radio  name="2">立即生效</van-radio>
          </van-radio-group>
        </div> -->
        <div v-if="!isgg" class="t_tips_box">
          <div style="color:#F83838">温馨提示：</div>
          <div style="color:#656565;margin-top: 8px;" >套餐有效期：当月27日0点至次月26日24点</div>
        </div>
        <div v-if="isgg" class="t_tips_box">
          <div style="color:#F83838">* 更换套餐须知</div>
          <div style="color:#656565;margin-top: 8px;" >1、套餐有效期为：当月27日0点至次月26日24点；</div>
          <div style="color:#656565;margin-top: 8px;" >2、每个周期可更改一次套餐，改套餐后将于下个有效期生效；</div>
        </div>

      <div class="t_title" style="margin-top: 30px;margin-bottom: 14px;" >请选择套餐：</div>
      <div >
        <!-- <div class="hui k1">选择激活套餐</div> -->
        <div>
          <!-- 年付 -->
          <div class="t_tcitem" v-if="item.monthNum!=1" v-for="item in list.list">
            <img src="../../static/img/rm.png" v-if="item.isHot==1" class="t_rm" alt="">
            <div class="t_tc_con">
              <div class="t_tcitem_title">
                <div class="t_tcitem_font">{{ item.title }}</div>
                <div class="t_tcitem_money">{{item.subTitle}}</div>
              </div>
              <div class="t_tcitem_info">{{item.info}}</div>
            </div>
            
            <div v-if="taocans.package_id==item.id" class="t_tc_ding">充值中</div>
            <div v-else @click="dgbtn(item.id)" class="t_tc_ding">订购</div>
          </div>
          <!-- 月付 -->
          <div class="t_tcitem"
          v-if="item.monthNum==1" style="background-color:#F2F2F2 ;" v-for="item in list.list">
            <img src="../../static/img/rm.png" v-if="item.isHot==1" class="t_rm" alt="">
            <div class="t_tc_con">
              <div class="t_tcitem_title">
                <div class="t_tcitem_font">{{ item.title }}</div>
                <div class="t_tcitem_money">{{item.subTitle}}</div>
              </div>
              <div class="t_tcitem_info">{{item.info}}</div>
            </div>
            
            <div v-if="taocans.package_id==item.id" class="t_tc_ding">充值中</div>
            <div v-else @click="dgbtn(item.id)" class="t_tc_ding">订购</div>
          </div>
        </div>
        <!-- <div class="taocanx">
          <van-radio-group v-model="taocans.package_id">
            <van-radio
              :name="item.id"
              v-for="item in list.list"
              :key="item.id"
              >{{ item.title }}</van-radio
            >
          </van-radio-group>
        </div> -->

        
        <!-- <div>建议20日以后绑卡充值用户可选择27日生效；</div> -->
        <!-- <div class="tu"><img src="../../static/img/t9.png" /></div> -->

        <!-- <div class="ju juzhong">{{ list.info }}</div> -->

        <!-- <div class="k2 btn" @click="bangding" v-if="!chongzhizhong">
          绑定充值
        </div>
        <div class="k2 btn" v-if="chongzhizhong">充值中...</div> -->
      </div>
    </div>
    <!-- 		<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />

		<van-action-sheet v-model="show" title="标题" @select="onSelect">
		  <div class="content">内容</div>
		</van-action-sheet> -->
    
  </div>
</div>
</template>

<script>
import axios from "axios";
import bus from "@/assets/bus.js";
import { Dialog } from 'vant';
export default {
  name: "genghuan",
  data() {
    return {
      taocans: {
        card_id: "",
        package_id: "",
        type: "",
      },
      // chongzhizhong: false,
      show: false,
      list: {
        list: [],
      },
      //当前日期
      nowdate:'',
      //绑定中
				bindload:false,
        //是否是更改套餐
        isgg:null,
      //是否展示弹窗
      isshowwindow:false,
      //展示哪个弹窗  1活动，2普通
      showtype:null,
      //是否有优惠套餐
      ishasyh:false,
      //有优惠选中的id
      chooseid:null

    };
  },
  watch: {
    // num:function(newValue, oldValue) {
    //   console.log(newValue, oldValue)
    // }
  },
  computed: {
    // zongjia:function(){
    //   return this.num * 100
    // }
  },
  created() {
    this.taocans.card_id = this.$route.query.canshu
   
    if(this.$route.query.type=='gg'){
      this.isgg = true
      this.changegettaocan()
    }else if(this.$route.query.type=='bd'){
      this.gettaocan()
    }
  },
  methods: {
    //关闭弹窗
    hidewindow(){
      this.isshowwindow = false
    },
    //立即生效单选
    radiochange(val){
      this.taocans.type = val
      if(this.list.isCurrentActivi == 1){
        //获取当前时间
        this.getdate()
        console.log(this.nowdate)
        if(this.nowdate>=15&&this.nowdate<=26){
          if(val==1){
            Dialog.confirm({
              title: '提示',
              message: '当月流量26日24点清零，您确定要选择立即生效吗？',
            })
              .then(() => {
                // on confirm
              })
              .catch(() => {
                this.taocans.type=''
              });
          }
        }
      }
      
      
    },
    //获取当前时间
    getdate(){
      var myDate = new Date();
      this.nowdate=myDate.getDate(); 
    },
    // 绑定获取套餐
    gettaocan: function () {
      this.axios
        .get(
          this.url +
            `/mobile/api/findPackageWithIccid?type=1&iccid=` +
            this.taocans.card_id
        )
        .then((response) => {
          if (response.data.success == true) {
            this.list = response.data.result;
              // this.taocans.package_id = this.list.list[0].id;
              for(var x = 0;x<this.list.list.length;x++){
                if(this.list.list[x].id == 89||this.list.list[x].id == 90){
                  this.ishasyh = true
                }
              }
              
              console.log(this.list.list)
          } else {
            this.$toast(response.data.message);
          }
        });
    },
    // 更改获取套餐
    changegettaocan(){
      this.axios.get(this.url + `/mobile/api/findPackageWithIccidOther?iccid=` + this.$route.query.canshu)
					.then(response => {
						if(response.data.success == true){
							this.list = response.data.result
							// this.radio = response.data.result.list[0].id
							// this.ing = false
              for(var x = 0;x<this.list.list.length;x++){
                if(this.list.list[x].id == 89||this.list.list[x].id == 90){
                  this.ishasyh = true
                }
              }
						}else{
							this.$toast(response.data.message);
							// this.ing = false
						}
					})
    },
    //点击订购
    dgbtn(id){
     //是否有优惠套餐
     if(this.ishasyh){
      this.chooseid = id
      //判断是否是89,90
      if(id==89||id==90){
        //活动套餐
        this.isshowwindow = true
        this.showtype = 1
      }else{
        //普通套餐
        this.isshowwindow = true
        this.showtype = 2
      }
     }else{
        this.taocans.package_id = id
        if(this.$route.query.type=='bd'){
          //绑定
          this.bangding()
        }else if(this.$route.query.type=='gg'){
          //绑定
          this.genggai()
          
        }
     }
      


      
    },
    //弹窗支付
    windowzf(){
      this.taocans.package_id = this.chooseid
        if(this.$route.query.type=='bd'){
          //绑定
          this.bangding()
        }else if(this.$route.query.type=='gg'){
          //绑定
          this.genggai()
          
        }
    },
    //绑定套餐
    bangding: function () {
      let that = this;
      //是否选择生效时间
      if(!this.taocans.type){
        this.$toast('请选择生效时间');
        this.taocans.package_id=''
        return
      }
      
      
      
      for(var i = 0;i<this.list.list.length;i++){
        if(this.list.list[i].id==this.taocans.package_id){
          //判断是否是89,90
          if(this.list.list[i].id==89||this.list.list[i].id==90){
           
            var is_pre = 5
          }else{
            
            //判断是否年付
            if(this.list.list[i].monthNum==1){
              console.log('月')
              var is_pre = 1
            }else{
              console.log('年')
              var is_pre = 2
            }
          }
        }
      }
      this.axios
        .post(
          this.url +
            `/mobile/api/bandCard?card_id=${this.taocans.card_id}&package_id=${this.taocans.package_id}&type=${this.taocans.type}`
        )
        .then((response) => {
          if (response.data.success == true) {
            if (response.data.code == 300) {
              //吊起支付
              this.axios
                .post(
                  this.url +
                    `/mobile/api/wechatPay?price=` +
                    response.data.result +
                    `&title=首次绑卡&type=${this.taocans.type}&is_pre=${is_pre}&iccid=${this.taocans.card_id}&package_id=${this.taocans.package_id}`
                )
                .then((response) => {
                  WeixinJSBridge.invoke(
                    "getBrandWCPayRequest",
                    {
                      appId: response.data.result.appId,
                      timeStamp: response.data.result.timeStamp,
                      nonceStr: response.data.result.nonceStr,
                      package: response.data.result.package,
                      signType: "MD5",
                      paySign: response.data.result.paySign,
                    },
                    function (res) {
                      if (res.err_msg == "get_brand_wcpay_request:ok") {
                        that.$toast("绑定成功！稍后将返回首页");
                        setTimeout(() => {
                          that.$router.push("/");
                        }, 3000);
                      } else {
                        that.$toast("支付失败，请重新支付");
                        that.taocans.package_id=''
                      }
                    }
                  );
                });
            } else {
              this.$toast("绑定成功！");
              setTimeout(() => {
                this.$router.push("/");
              }, 1000);
            }
          } else {
            this.taocans.package_id=''
            this.$toast(response.data.message);
          }
        });
    },
    //更改套餐
    genggai: function() {
				var that = this
        
      for(var i = 0;i<this.list.list.length;i++){
        if(this.list.list[i].id==this.taocans.package_id){
          //判断是否是89,90


          if(this.list.list[i].id==89||this.list.list[i].id==90){
            //判断是否已经用了优惠套餐
            if(this.$route.query.isJoin==1){
              //判断是否年付
              if(this.list.list[i].monthNum==1){
                console.log('月')
                var is_pre = 1
              }else{
                console.log('年')
                var is_pre = 3
              }

            }else{
              var is_pre = 6
            }

          
          }else{
              //判断是否年付
              if(this.list.list[i].monthNum==1){
                console.log('月')
                var is_pre = 1
              }else{
                console.log('年')
                var is_pre = 3
              }
          }
          
        }
      }
				// if(this.isclick){
					// this.isclick=false
					this.axios.post(this.url + `/mobile/api/changePackage?package_id=${this.taocans.package_id}&iccid=` + this.$route.query.canshu)
					.then(response => {
						if(response.data.code==300){
							//吊起支付
							this.axios.post(this.url + `/mobile/api/wechatPay?price=` + response.data.result + `&title=续费&iccid=${this.$route.query.canshu}&package_id=${this.taocans.package_id}&is_pre=${is_pre}`)
								.then(response3 => {
									WeixinJSBridge.invoke(
										'getBrandWCPayRequest', {
										"appId": response3.data.result.appId,
										'timeStamp': response3.data.result.timeStamp,
										'nonceStr': response3.data.result.nonceStr,
										'package': response3.data.result.package,
										'signType': "MD5",
										'paySign': response3.data.result.paySign,
									},
										function (res) {
											if (res.err_msg == "get_brand_wcpay_request:ok") {
												that.$toast('绑定成功！正在跳转首页');
												setTimeout(function(){
													that.$router.push('/')
												},2000)
											} else {
												that.$toast("支付失败，请重新支付");
                        that.taocans.package_id=''
											}
										});
								})
						}else if(response.data.code==301){
              Dialog.confirm({
                title: '提示',
                message: '欠费状态更改套餐，缴费后将按照新套餐立即扣费并生效，请留意本月剩余天数',
              })
              .then(() => {
                // on confirm
                //吊起支付
                this.axios.post(this.url + `/mobile/api/wechatPay?price=` + response.data.result + `&title=续费&iccid=${this.$route.query.canshu}&package_id=${this.taocans.package_id}&is_pre=${is_pre}`)
                  .then(response3 => {
                    WeixinJSBridge.invoke(
                      'getBrandWCPayRequest', {
                      "appId": response3.data.result.appId,
                      'timeStamp': response3.data.result.timeStamp,
                      'nonceStr': response3.data.result.nonceStr,
                      'package': response3.data.result.package,
                      'signType': "MD5",
                      'paySign': response3.data.result.paySign,
                    },
                      function (res) {
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                          that.$toast('绑定成功！正在跳转首页');
                          setTimeout(function(){
                            that.$router.push('/')
                          },2000)
                        } else {
                          that.$toast("支付失败，请重新支付");
                          that.taocans.package_id=''
                        }
                      });
                  })
              })
              .catch(() => {
                this.taocans.package_id=''
              });
							
						}else{
							if(response.data.success == true){
								this.$toast('已更改');
								setTimeout(() => {
									this.$router.push('/')
								},1000)
							}else{
								this.$toast(response.data.message);
                this.taocans.package_id=''
							}
						}
						// if(response.data.success == true){
						// 	this.$toast('已更改');
						// 	setTimeout(() => {
						// 		this.$router.push('/')
						// 	},1000)
						// }else{
						// 	this.$toast(response.data.message);
						// }
					})
				// }
				
			},
  },
};
</script>
<style scoped>
.tanwindow{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  z-index: 100000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t_title{
  border-left: 6px solid #FF4444;
  font-weight: bold;
  padding-left: 5px;
  line-height: 16px;
}
.t_sxtimebox{
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}
.t_sxitem{
  background-color: #E6E6E6;
  color: #787878;
  width: 49%;
  border-radius: 5px;
  padding: 15px 0;
  text-align: center;
}
.t_tips_box{
  background-color: #EFEFEF;
  border-radius: 5px;
  padding: 13px;
  font-size: 13px;
  margin-top: 10px;
}
.t_tcitem{
  border: 1px solid #979797;
  border-radius: 5px;
  background-color: white;
  padding: 20px 15px;
  display: flex;
  justify-content:space-between;
  margin-bottom: 10px;
  position: relative;
}
.t_rm{
  width: 34px;
  position: absolute;
  left: 0;
  top: 0;
}
.t_tcitem_title{
  display: flex;
  justify-content: space-between;
}
.t_tcitem_font{
  font-size: 15px;
  color: #333333;
  font-weight: 500;
}
.t_tcitem_money{
  color: #FF3030;
  font-size: 13px;
}
.t_tc_con{
  width: 70%;
}
.t_tc_ding{
  background: linear-gradient(-90deg, #FF7B3D, #FDA043);
  color: white;
  font-size: 13px;
  border-radius: 20px;
  width: 60px;
  line-height: 26px;
  text-align: center;
  align-self:center;
}
.t_tcitem_info{
  font-size: 12px;
  color: #8D8D8D;
  margin-top: 12px;
}
</style>
<style scoped lang="less">
.all {
  background: #F9F9F9;
  font-size: 0.28rem;
  min-height: 100vh;

  .van-radio {
    width: 100%;
    margin-bottom: 0.2rem;
  }
  .taocanx {
    .van-radio {
      margin-bottom: 0.2rem !important;
    }
  }
  .tu {
    text-align: center;
    padding: 0.4rem 0;

    img {
      width: 6rem;
    }
  }

  .top {
    margin-left: auto;
    margin-right: auto;
  }

  .k1 {
    margin-bottom: 0.3rem;
  }

  .k3 {
    color: #ff6367;
    margin-bottom: 0.2rem;
  }

  .k2 {
    margin: 0.5rem 0;
  }

  .van-field {
    background: #f7f7f7;
  }

  .red {
    color: #ff6367;
    font-size: 0.28rem;
    margin: 0 0.05rem;
  }

  .inp {
    position: relative;
    margin-bottom: 0.3rem;
  }

  .inpa {
    position: absolute;
    right: 0.1rem;
    top: 7px;
    color: #ffffff;
    background: #ffb300;
    padding: 0 0.2rem;
    border-radius: 0.1rem;
    font-size: 0.28rem;
    line-height: 30px;
  }
}
</style>
